<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="总统计" name="total">
      <el-table :data="totalData" @sort-change="handleSortTotal">
        <el-table-column
          prop="deviceTotal"
          label="设备总量"
          sortable="custom"
        />
        <el-table-column prop="online" label="设备在线数量" sortable="custom" />
        <el-table-column
          prop="offline"
          label="设备掉线数量"
          sortable="custom"
        />
        <el-table-column
          prop="averageScore"
          label="平均评分"
          sortable="custom"
        />
        <el-table-column
          prop="onlineDuration"
          label="在线总时长"
          sortable="custom"
        />
        <el-table-column prop="statTime" label="统计时间" sortable="custom" />
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="设备统计点" name="device">
      <el-table :data="deviceData" @sort-change="handleSortDevice">
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="number" label="编号" />
        <el-table-column prop="name" label="设备名称" />
        <el-table-column prop="total" label="总量" sortable="custom" />
        <el-table-column prop="online" label="在线数量" sortable="custom" />
        <el-table-column prop="offline" label="掉线数量" sortable="custom" />
        <el-table-column
          prop="averageScore"
          label="平均评分"
          sortable="custom"
        />
        <el-table-column
          prop="onlineDuration"
          label="在线时长"
          sortable="custom"
        >
          <template #default="{ row }"> {{ row.onlineDuration }}小时 </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import { ref } from "vue";
import {
  ElTabs,
  ElTabPane,
  ElTable,
  ElTableColumn,
  ElButton
} from "element-plus";

const activeTab = ref("total");

const totalData = ref([
  {
    deviceTotal: 35,
    online: 33,
    offline: 2,
    averageScore: 86,
    onlineDuration: "360小时",
    statTime: "2024-01-01"
  },
  {
    deviceTotal: 35,
    online: 34,
    offline: 1,
    averageScore: 86,
    onlineDuration: "330小时",
    statTime: "2023-12-31"
  },
  {
    deviceTotal: 33,
    online: 31,
    offline: 2,
    averageScore: 86,
    onlineDuration: "330小时",
    statTime: "2023-12-30"
  },
  {
    deviceTotal: 33,
    online: 32,
    offline: 1,
    averageScore: 83,
    onlineDuration: "310小时",
    statTime: "2023-12-29"
  },
  {
    deviceTotal: 30,
    online: 30,
    offline: 0,
    averageScore: 89,
    onlineDuration: "295小时",
    statTime: "2023-12-28"
  }
]);

const deviceData = ref([
  {
    id: 1,
    number: "20241000001",
    name: "监控",
    total: 10,
    online: 10,
    offline: 0,
    averageScore: 95,
    onlineDuration: 35
  },
  {
    id: 2,
    number: "20242000001",
    name: "信号灯",
    total: 30,
    online: 29,
    offline: 1,
    averageScore: 88,
    onlineDuration: 140
  },
  {
    id: 3,
    number: "20243000001",
    name: "灯牌",
    total: 25,
    online: 25,
    offline: 0,
    averageScore: 92,
    onlineDuration: 63
  }
]);

function handleSortTotal({ column, prop, order }) {
  totalData.value = [...totalData.value].sort((a, b) => {
    if (order === "ascending") {
      return a[prop] - b[prop];
    } else if (order === "descending") {
      return b[prop] - a[prop];
    }
    return 0;
  });
}

function handleSortDevice({ column, prop, order }) {
  deviceData.value = [...deviceData.value].sort((a, b) => {
    if (order === "ascending") {
      return a[prop] - b[prop];
    } else if (order === "descending") {
      return b[prop] - a[prop];
    }
    return 0;
  });
}

function exportTable() {
  const doc = new jsPDF();
  const table = [
    [
      "ID",
      "编号",
      "设备名称",
      "总量",
      "在线数量",
      "掉线数量",
      "平均评分",
      "在线时长"
    ],
    ...deviceData.value.map(row => [
      row.id,
      row.number,
      row.name,
      row.total,
      row.online,
      row.offline,
      row.averageScore,
      row.onlineDuration + "小时"
    ])
  ];
  doc.autoTable({ head: table[0], body: table.slice(1) });
  doc.save("device-data.pdf");
}
</script>

<style scoped>
/* 你可以在这里添加一些自定义样式 */
</style>
